<template>
	<view class="container">
		<view class="my-box" v-for="(item,index) in userlist" :key="index">
			<view class="h4"  @click="title(item.name)">
				{{item.name}}
				<view class="h4-right">
					<u-icon name='arrow-right' :size="20"></u-icon>
				</view>
			</view>
			<view class="list">
				<u-grid :border="false" col="5">
					<u-grid-item v-for="(it,i) in item.child" :key='i' @click='gridname(it.name,i)'>
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="it.icon" :size="22"></u-icon>
						<text class="grid-text">{{it.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userlist: {
					order: {
						name: '我的订单',
						child: [{
								icon: 'rmb-circle',
								name: '待付款'
							}, {
								icon: 'car',
								name: '待发货'
							}, {
								icon: 'bag',
								name: '待收货'
							}, {
								icon: 'thumb-up',
								name: '待评价'
							},
							{
								icon: 'chat',
								name: '售后'
							}
						]
					},
					sever: {
						name: '核心服务',
						child: [{
								icon: 'coupon',
								name: '优惠券'
							}, {
								icon: 'star',
								name: '商品收藏'
							}, {
								icon: 'calendar',
								name: '浏览足迹'
							}, {
								icon: 'man-add',
								name: '我的拼团'
							},
							{
								icon: 'map',
								name: '地址管理'
							}
						]
					},
					tool: {
						name: '必备工具',
						child: [{
								icon: 'lock',
								name: '账号修改'
							}, {
								icon: 'star',
								name: '商品收藏'
							}, {
								icon: 'edit-pen',
								name: '意见反馈'
							}, {
								icon: 'server-man',
								name: '联系客服'
							},
							{
								icon: 'error-circle',
								name: '关于我们'
							}
						],
					}
				}
			}
		},
		methods: {
			gridname(e,i) {
					if(this.$store.state.Key==''){
						uni.navigateTo({
							url:'/pages/user/register/register'
						})
					}else{
					this.getUrl(e,'账号修改','/pages/user/reset/reset')
					this.getUrl(e,'商品收藏','/pages/collect/collect')
					this.getUrl(e,'地址管理','/pages/address/index/index')
					this.getUrl(e,'待付款','/pages/orderlist/orderlist?id='+Number(i+1))
					this.getUrl(e,'待发货','/pages/orderlist/orderlist?id='+Number(i+1))
					this.getUrl(e,'待收货','/pages/orderlist/orderlist?id='+Number(i+1))
					this.getUrl(e,'待评价','/pages/orderlist/orderlist?id='+Number(i+1))
					console.log(e,i+1)
					}
			},
			getUrl(id,string,Url){
					if(id==string){
						uni.navigateTo({
							url:Url
						})
				}
			},
			title(name){
				if(this.$store.state.Key==''){
					uni.navigateTo({
						url:'/pages/user/register/register'
					})
				}else{
					if(name==='我的订单'){
						uni.navigateTo({
							url:'/pages/orderlist/orderlist'
						})
					}
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'uview-ui/theme.scss';

	@mixin no-bullets {
		.h4 {
			line-height: 100rpx;
			font-weight: 900;
			padding-right: 50rpx;
			margin-left: 30rpx;

			.h4-right {
				margin-top: 30rpx;
				float: right;
			}
		}
	}

	.container {
		background-color: #e0bb76;
		height: 80vh;

		.my-box {
			background-color: #fff;
			box-shadow: 0px 2px 2px #c2c2c2;
			margin-bottom: 30rpx;
			@include no-bullets;

			.list {
				.grid-text {
					margin: 20rpx 0;

				}
			}
		}
	}
</style>
